<template>
  <div class="brokerage-container">
    <!-- 账户总览卡片 -->
    <div class="account-overview">
      <!-- 医院账户总览 -->
      <el-card class="account-card" shadow="never">
        <div class="account-header">
          <h3>医院账户总览</h3>
          <div class="account-actions">
            <el-button type="text" @click="viewBalanceDetails('hospital')">余额明细</el-button>
            <el-button type="text" @click="viewWithdrawalRecords('hospital')">提现记录</el-button>
          </div>
        </div>

        <div class="account-balance">
          <span class="balance-label">账户余额(元)</span>
          <span class="balance-amount">{{ overview }}</span>
          <el-button type="primary" class="withdraw-btn" @click="openWithdrawalDialog">提现</el-button>
        </div>

        <div class="withdrawal-info">
          <p>(每月可提现时间: 1号—10号)</p>
        </div>

        <div class="error-message">
          <p>银行卡绑定失败，请重新提交</p>
          <p>失败原因：签名不能为空</p>
        </div>
      </el-card>

      <!-- 个人账户总览 -->
      <el-card class="account-card" shadow="never">
        <div class="account-header">
          <h3>个人账户总览</h3>
          <div class="account-actions">
            <el-button type="text" @click="viewBalanceDetails('individual')">余额明细</el-button>
            <el-button type="text" @click="viewWithdrawalRecords('individual')">提现记录</el-button>
          </div>
        </div>

        <div class="account-balance">
          <span class="balance-label">账户余额(元)</span>
          <span class="balance-amount">{{ account }}</span>
          <el-button type="primary" class="bind-card-btn" @click="openBindCardDialog">绑定银行卡</el-button>
        </div>
      </el-card>
    </div>

    <!-- 收支情况表格 -->
    <el-card class="收支-table-card" shadow="never">
      <h3>医院账户近一周收支情况</h3>
      <el-table :data="incomeExpenseData" style="width: 100%" border height="524px">
        <el-table-column prop="createDate" label="日期" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate.split('T')[0] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账户" min-width="120"></el-table-column>
        <el-table-column prop="expenditure" label="支出" min-width="120" align="right">
          <template slot-scope="scope">
            <span style="color: #f56c6c; font-weight: 500;">{{ (scope.row.expenditure || 0) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="income" label="收入" min-width="120" align="right">
          <template slot-scope="scope">
            <span style="color: #67c23a; font-weight: 500;">{{ (scope.row.income) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 绑定银行卡弹窗 -->
    <el-dialog title="绑定银行卡" :visible.sync="bindCardDialogVisible" width="600px" :close-on-click-modal="false">
      <div class="bind-card-form">
        <p class="bind-card-tip">为了确保账户和资金安全，同时遵循国家相关实名法规规定，账户一经实名认证通过银行卡信息就必须与实名账户信息完全一致才能相互绑定。</p>

        <div class="form-group">
          <label>开户行：</label>
          <el-input v-model="bindCardForm.bankName" placeholder="请输入开户行" style="width: 300px;"></el-input>
        </div>

        <div class="form-group">
          <label>公司名称：</label>
          <el-input v-model="bindCardForm.corporateName" placeholder="请输入公司名称" style="width: 300px;"></el-input>
        </div>

        <div class="form-group">
          <label>银行卡号：</label>
          <el-input v-model="bindCardForm.cardNumber" placeholder="请输入银行卡号" style="width: 300px;"></el-input>
        </div>

        <div class="form-group">
          <label>开户行号：</label>
          <el-input v-model="bindCardForm.bankCode" placeholder="请输入开户行号" style="width: 300px;"></el-input>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeBindCardDialog">取消</el-button>
        <el-button type="primary" @click="saveBindCard">保存</el-button>
      </div>
    </el-dialog>

    <!-- 提现弹窗 -->
    <el-dialog title="提现申请" :visible.sync="withdrawalDialogVisible" width="800px" :close-on-click-modal="false"
      style="margin-top: -10vh;">
      <div class="withdrawal-form">
        <div class="form-group">
          <label>提现账户：</label>
          <span class="form-value" style="font-weight: 700;">中心医院</span>
        </div>

        <div class="form-group">
          <label>可提现金额：</label>
          <span class="form-value amount">{{ overview }}元</span>
          <el-button type="text" size="small" @click="AllWithdrawal" style="margin-left: 10px;">全部提现</el-button>
        </div>

        <div class="form-group">
          <label>本次提现金额：</label>
          <el-input v-model="withdrawalForm.amount" placeholder="请输入提现金额" style="width: 150px"
            @input="calculateArrivalAmount" :maxlength="10" show-word-limit></el-input>
          <span class="form-value">元</span>
          <div v-if="amountError" class="error-tip">{{ amountError }}</div>
        </div>

        <div class="form-group">
          <label>本次到账金额：</label>
          <span class="form-value amount">{{ arrivalAmount }}元</span>
          <div class="fee-tip">（包含手续费：{{ serviceFee }}）</div>
        </div>

        <div class="form-group">
          <label>到账银行卡：</label>
          <el-radio-group v-model="withdrawalForm.bankCardType" @change="onBankCardTypeChange">
            <el-radio label="corporate">对公账户</el-radio>
            <el-radio label="individual">个人账户</el-radio>
          </el-radio-group>
        </div>
        <div class="form-group">
          <label></label>
          <div class="bank-tip">
            <p style="display: inline;color: #37dabd;" @click="openBindCardDialog">绑定银行卡 </p>
            <p style="display: inline;padding-left: 10px;"> 建议绑定合同指定账户</p>
          </div>
          <!-- 显示银行卡信息 -->
          <div v-if="selectedBankCard" class="bank-card-info">
            <p>{{ selectedBankCard.bankName }}:</p>
            <p>{{ selectedBankCard.cardNumber }}</p>
          </div>
        </div>

        <!-- <div class="form-group">
          <label>手机号：</label>
          <el-input v-model="withdrawalForm.phoneNumber" placeholder="请输入手机号" style="width: 150px" maxlength="11"
            show-word-limit @input="onPhoneChange"></el-input>
          <div v-if="phoneError" class="error-tip">{{ phoneError }}</div>
        </div>

        <div class="form-group">
          <label>验证码：</label>
          <el-input v-model="withdrawalForm.verificationCode" placeholder="请输入验证码"
            style="width: 150px; margin-right: 10px" maxlength="6" show-word-limit
            @input="checkSubmitStatus"></el-input>
          <el-button type="primary" size="small" :disabled="countdown > 0 || !canSendCode"
            @click="sendVerificationCode">
            {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
          </el-button>
        </div> -->
      </div>

      <div class="withdrawal-faq">
        <h4>使用遇到问题？</h4>
        <div class="faq-item">
          <p class="faq-question">• 提现申请提交成功后，多久会入账？</p>
          <p class="faq-answer">答：每月15号结算，预计次日到账，节假日顺延。</p>
        </div>
        <div class="faq-item">
          <p class="faq-question">• 提现失败的原因是什么？</p>
          <p class="faq-answer">答：提现银行卡信息有误或者发卡行不支持此交易，请检查信息或者更换银行卡后重新申请提现。</p>
        </div>
        <div class="faq-item">
          <p class="faq-question">• 提现支持银行卡有哪些？</p>
          <p class="faq-answer">答：目前企业付款到银行卡支持15家银行，更多银行逐步开放中。</p>
        </div>
        <div class="faq-item">
          <p class="faq-question">• 提现遇到问题找谁?</p>
          <p class="faq-answer">电话客服:400-8793512</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeWithdrawalDialog">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submitWithdrawal"
          :disabled="!canSubmit">立即提现</el-button>
      </div>
    </el-dialog>
    <el-dialog title="余额明细" :visible.sync="withdrawalDialogVisibles" width="800px" :close-on-click-modal="false"
      style="margin-top: -10vh;">
      <div style="height: 500px;">
        <el-table :data="withdrawalList" border height="100%">
          <el-table-column prop="orderId" label="订单号" min-width="120"></el-table-column>
          <el-table-column prop="createTime" label="日期" min-width="120" align="center" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.createTime.split('T')[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="payerTotal" label="金额" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.payerTotal }}元</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog title="提现记录" :visible.sync="withdrawalDialogVisibless" width="80%" :close-on-click-modal="false"
      style="margin-top: -10vh;">
      <div style="height: 500px;">
        <el-table :data="withdrawalLists" border height="100%">
          <el-table-column prop="createTime" label="申请时间" min-width="120" align="center" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.createTime.split('T')[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="applicationAmount" label="申请金额(元)" min-width="120" align="center"></el-table-column>
          <el-table-column prop="applicationAmount" label="到账金额(元)" min-width="120" align="center"></el-table-column>
          <el-table-column prop="handlingFee" label="提现手续费" min-width="120" align="center"></el-table-column>
          <el-table-column prop="bank" label="到账银行卡" min-width="120" align="center"></el-table-column>
          <el-table-column prop="state" label="订单状态" min-width="120" align="center"></el-table-column>
          <el-table-column prop="createUser" label="申请人" min-width="120" align="center"></el-table-column>
        </el-table>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as itemOneClass from '../../api/itemOneClass'

export default {
  name: 'BrokerageSettings',
  data() {
    return {
      withdrawalDialogVisibless: false,//提现记录弹窗
      withdrawalDialogVisibles: false,//余额明细弹窗
      withdrawalDialogVisible: false,
      bindCardDialogVisible: false,
      countdown: 0,
      timer: null,
      withdrawalForm: {
        amount: '',
        phoneNumber: '19522493317',
        verificationCode: '',
        bankCardType: 'corporate' // corporate: 对公账户, individual: 个人账户
      },
      withdrawalList: [], // 余额明细列表
      withdrawalLists: [], // 提现记录列表
      bindCardForm: {
        bankName: '',
        corporateName: '',
        cardNumber: '',
        bankCode: ''
      },
      arrivalAmount: '10.18', // 到账金额
      serviceFee: '0.10', // 手续费
      amountError: '', // 金额错误提示
      phoneError: '', // 手机号错误提示
      selectedBankCard: null, // 选中的银行卡信息
      submitting: false, // 提交状态
      canSubmit: false, // 是否可以提交
      canSendCode: true, // 是否可以发送验证码
      overview: '', // 医院账户总览
      account: '', // 个人账户
      incomeExpenseData: [
      ],
      ids: [], // 未提现的数组
      bankId: '', // 银行id
    }
  },
  created() {
    this.getFinanceData()
  },
  methods: {
    // 全部提现
    AllWithdrawal() {
      // this.withdrawalForm.amount = this.overview
      itemOneClass.amountReceived({
        type: this.withdrawalForm.bankCardType,
        amount: this.overview
      }).then(response => {
        console.log('提现数据：', response);
        if (response.code === 200) {
          this.arrivalAmount = response.data.amount
          this.serviceFee = response.data.rate
          this.withdrawalForm.amount = this.overview
          this.checkSubmitStatus() // 关键：赋值后立即更新按钮状态
        } else {
          this.$message.error('提现申请提交失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })
    },
    // 输入框提现
    amountWithdrawal(amount) {
      itemOneClass.amountReceived({
        type: this.withdrawalForm.bankCardType,
        amount: amount
      }).then(response => {
        console.log('提现数据：', response);
        if (response.code === 200) {
          this.arrivalAmount = response.data.amount
          this.serviceFee = response.data.rate
          // this.withdrawalForm.amount = this.overview
        } else {
          this.$message.error('提现申请提交失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })
    },
    // 获取账单数据
    getFinanceData() {
      itemOneClass.finance({
        hospitalId: localStorage.getItem('hospitalUid')
      }).then(response => {
        console.log('账单数据：', response.data.hospitalFinanceList);
        if (response.code === 200) {
          this.incomeExpenseData = response.data.hospitalFinanceList,
            this.ids = response.data.ids || [],
            this.account = response.data.account || [],
            this.overview = response.data.overview || []
        } else {
          this.$message.error('数据加载失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })
    },
    //余额明细
    viewBalanceDetails(type) {
      // this.$message.info(`查看${type === 'hospital' ? '医院' : '个人'}账户余额明细`)
      // 实际应用中这里应该打开余额明细弹窗或跳转到余额明细页面
      // 调用余额明细接口
      itemOneClass.balanceDetails({
        hospitalId: localStorage.getItem('hospitalUid'),
        // type: type
      }).then(response => {
        console.log('余额明细数据：', response);
        if (response.code == 200) {
          // 处理余额明细数据，例如展示在弹窗或页面上
          this.withdrawalList = response.data || []
          this.withdrawalDialogVisibles = true
          // this.$message.success('余额明细加载成功')
        } else {
          this.$message.error('余额明细加载失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })

    },
    viewWithdrawalRecords(type) {
      // this.$message.info(`查看${type === 'hospital' ? '医院' : '个人'}账户提现记录`)
      // 实际应用中这里应该打开提现记录弹窗或跳转到提现记录页面
      itemOneClass.withdrawalHistory({
        hospitalId: localStorage.getItem('hospitalUid'),
        // type: type
      }).then(response => {
        console.log('提现记录数据：', response);
        if (response.code == 200) {
          // 处理余额明细数据，例如展示在弹窗或页面上
          this.withdrawalLists = response.data || []
          this.withdrawalDialogVisibless = true
          // this.$message.success('提现记录加载成功')
        } else {
          this.$message.error('提现记录加载失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })
    },
    //查询账户总览绑定银行卡
    queryByBank() {
      // 查询银行卡
      itemOneClass.queryByBankId({
        hospitalId: localStorage.getItem('hospitalUid')
      }).then(response => {
        console.log('查询银行卡数据：', response);
        if (response.code === 200) {
          this.withdrawalDialogVisible = true
          this.arrivalAmount = this.overview || 0
          this.bankId = response.data[0].id || ''
          this.selectedBankCard = {
            bankName: response.data[0].hospitalDeposit || '',
            cardNumber: response.data[0].hospitalNumber || ''
          };
        } else {
          this.$message.error('查询银行卡失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })
    },
    // 打开提现弹窗
    openWithdrawalDialog() {
      // 查询银行卡
      this.queryByBank()
    },

    // 打开绑定银行卡弹窗
    openBindCardDialog() {
      this.bindCardDialogVisible = true
    },

    // 关闭绑定银行卡弹窗
    closeBindCardDialog() {
      this.bindCardDialogVisible = false
    },

    // 保存绑定银行卡信息
    saveBindCard() {
      // 模拟保存操作
      itemOneClass.addBank({
        hospitalId: localStorage.getItem('hospitalUid'),//医院id
        hospitalDeposit: this.bindCardForm.bankName,//开户行
        hospitalCompany: this.bindCardForm.corporateName,//公司名称
        hospitalNumber: this.bindCardForm.cardNumber,//卡号
        hospitalBankCode: this.bindCardForm.bankCode,//开户行号
      }).then(response => {
        console.log('绑定银行卡数据：', response);
        if (response.code === 200) {
          this.$message.success('银行卡绑定成功')
          this.bindCardDialogVisible = false
          // 重置表单
          this.bindCardForm = {
            bankName: '',
            corporateName: '',
            cardNumber: '',
            bankCode: ''
          }
        } else {
          this.$message.error('银行卡绑定失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })
    },

    // 关闭提现弹窗
    closeWithdrawalDialog() {
      this.withdrawalDialogVisible = false
    },

    // 计算到账金额
    calculateArrivalAmount() {
      const amount = parseFloat(this.withdrawalForm.amount);
      const maxAmount = parseFloat(this.overview || 0); // 可提现金额上限


      // 防抖处理：3000ms内用户未输入，再发起接口（避免频繁请求）
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        //  金额合法性校验（同步更新错误提示）
        if (!amount || amount <= 0) {
          this.amountError = '请输入有效的提现金额';
        } else if (amount > maxAmount) {
          this.amountError = `提现金额不能超过可提现金额 ${maxAmount} 元`;
        } else {
          this.amountError = '';
          this.amountWithdrawal(amount); // 调用接口计算到账金额
        }
        // 关键：输入框变化后，更新按钮状态
        this.checkSubmitStatus();
      }, 3000);

      // 检查是否可以提交，实时更新按钮状态（即使在防抖延迟内，也先判断是否有值）
      this.checkSubmitStatus();
    },

    // 检查是否可以提交
    checkSubmitStatus() {
      // const { amount, phoneNumber, verificationCode } = this.withdrawalForm;
      // const isAmountValid = amount && parseFloat(amount) > 0 && parseFloat(amount) <= 10.28;
      // const isPhoneValid = phoneNumber && /^1[3-9]\d{9}$/.test(phoneNumber);
      // const isCodeValid = verificationCode && verificationCode.length === 6;
      // // this.canSubmit = isAmountValid && isPhoneValid && isCodeValid;
      // this.canSendCode = phoneNumber && /^1[3-9]\d{9}$/.test(phoneNumber);
      const { amount } = this.withdrawalForm;
      const pureAmount = amount ? amount.trim() : ''; // 去除输入框空格
      const parsedAmount = parseFloat(pureAmount);
      const maxAmount = parseFloat(this.overview || 0);

      // 按钮启用条件：
      // 1. 输入框有非空值（去除空格后）
      // 2. 金额是有效数字（不是NaN）
      // 3. 金额 > 0 且 ≤ 可提现金额（避免无效提交）
      this.canSubmit = !!pureAmount
        && !isNaN(parsedAmount)
        && parsedAmount > 0
        && parsedAmount <= maxAmount;

      // 保留原有的“发送验证码”判断（若后续启用手机号功能，无需修改）
      this.canSendCode = this.withdrawalForm.phoneNumber
        && /^1[3-9]\d{9}$/.test(this.withdrawalForm.phoneNumber);
    },

    // 手机号变化时
    onPhoneChange() {
      const { phoneNumber } = this.withdrawalForm;
      if (phoneNumber && !/^1[3-9]\d{9}$/.test(phoneNumber)) {
        this.phoneError = '请输入有效的手机号';
      } else {
        this.phoneError = '';
      }
      this.checkSubmitStatus();
    },

    // 银行卡类型变化时
    onBankCardTypeChange() {
      // 这里可以根据银行卡类型加载不同的银行卡信息
      if (this.withdrawalForm.bankCardType === 'corporate') {
        this.queryByBank()
      } else {
        this.queryByBank()
      }
    },

    // 发送验证码
    sendVerificationCode() {
      // 先验证手机号
      this.onPhoneChange();
      if (this.phoneError) {
        return;
      }

      // 模拟发送验证码
      this.countdown = 60;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);

      this.$message.success('验证码已发送');
    },

    // 提交提现申请
    submitWithdrawal() {
      itemOneClass.withdraw({
        hospitalId: localStorage.getItem('hospitalUid'),//医院id
        amount: this.withdrawalForm.amount,//提现金额
        bankId: this.bankId,//银行id
        ids: this.ids,//未提现的数组
      }).then(response => {
        console.log('提现申请数据：', response);
        if (response.code === 200) {
          this.$message.success('提现申请已提交，等待审核')
          this.withdrawalDialogVisible = false
          // 重置表单
          this.resetWithdrawalForm()
        } else {
          this.$message.error('提现申请提交失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      })
      // 再次验证
      // this.calculateArrivalAmount();
      // this.onPhoneChange();

      // if (this.amountError || this.phoneError) {
      //   return;
      // }

      // // 显示提交中状态
      // this.submitting = true;

      // // 模拟提交提现申请
      // setTimeout(() => {
      //   this.$message.success('提现申请已提交，等待审核');
      //   this.withdrawalDialogVisible = false;
      //   this.submitting = false;
      //   // 重置表单
      //   this.resetWithdrawalForm();
      // }, 1500);
    },

    // 重置提现表单
    resetWithdrawalForm() {
      this.withdrawalForm = {
        amount: '',
        phoneNumber: '19522493317',
        verificationCode: '',
        bankCardType: 'corporate'
      };
      this.arrivalAmount = '10.18';
      this.serviceFee = '0.10';
      this.amountError = '';
      this.phoneError = '';
      this.canSubmit = false;
    },

    // 关闭提现弹窗
    closeWithdrawalDialog() {
      this.withdrawalDialogVisible = false;
      // 延迟重置，避免动画卡顿
      setTimeout(() => {
        this.resetWithdrawalForm();
      }, 300);
    }
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },

  // 监听数据变化
  watch: {
    // 监听提现金额输入框，实时判断按钮状态
    'withdrawalForm.amount': function () {
      this.checkSubmitStatus();
    },
    // 监听可提现金额（若有变化，也更新按钮状态）
    'overview': function () {
      this.checkSubmitStatus();
    },
    // 保留原有的手机号监听（若后续启用，无需修改）
    'withdrawalForm.phoneNumber': function () {
      this.onPhoneChange();
    },
    'withdrawalForm.verificationCode': function () {
      this.checkSubmitStatus();
    }
  }
}
</script>

<style scoped>
.brokerage-container {
  height: 100%;
  padding: 20px;
  overflow: hidden;
}

.account-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.account-card {
  flex: 1;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.account-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.account-actions {
  display: flex;
  gap: 10px;
}

.account-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.balance-label {
  font-size: 14px;
  color: #606266;
}

.balance-amount {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.withdraw-btn,
.bind-card-btn {
  background-color: #30d9bb;
  border-color: #30d9bb;
}

.withdraw-btn:hover,
.bind-card-btn:hover {
  background-color: #2ac7a8;
  border-color: #2ac7a8;
}

.withdrawal-info {
  font-size: 12px;
  color: #909399;
  margin-bottom: 10px;
}

.error-message {
  font-size: 12px;
  color: #f56c6c;
}

/* 提现弹窗样式 */
.withdrawal-form {
  margin-bottom: 10px;
  border: 1px solid #ebeef5;
  padding: 20px;
}

/* 绑定银行卡弹窗样式 */
.bind-card-form {
  padding: 20px 0;
}

.bind-card-tip {
  margin-bottom: 20px;
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-left: 4px solid #48ddc3;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  position: relative;
}

.el-radio-group {
  font-size: 0;
  margin-left: -20px;
}

.form-group label {
  width: 100px;
  text-align: right;
  margin-right: 10px;
  color: #606266;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #48ddc3;
  background: #48ddc3;
}

.form-value {
  color: #303133;
}

.form-value.amount {
  color: #30d9bb;
  font-weight: 500;
}

.bank-tip {
  margin-left: 0px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

/* 新添加的样式 */
.error-tip {
  position: absolute;
  top: 100%;
  left: 110px;
  margin-top: 4px;
  font-size: 12px;
  color: #f56c6c;
}

.fee-tip {
  margin-left: 10px;
  font-size: 12px;
  color: #909399;
}

.bank-card-info {
  margin-left: 110px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 13px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.withdrawal-faq {
  margin-top: 10px;
  border: 1px solid #ebeef5;
  padding: 20px;
}

.withdrawal-faq h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #303133;
}

.faq-item {
  margin-bottom: 10px;
}

.faq-question {
  margin: 0 0 5px 0;
  font-size: 13px;
  color: #303133;
}

.faq-answer {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
}

.收支-table-card {
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.收支-table-card h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 500;
}

/* 同时修改body样式防止滚动 */
body .el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 2050;
}

/* 适配小屏幕 */
@media (max-width: 768px) {
  .account-overview {
    flex-direction: column;
  }

  .account-card {
    margin-bottom: 15px;
  }
}
</style>